<template>
    <div class="page-container index-container">
        <div class="info-part">
            <div class="title">
                <h1>钱塘新区</h1>
                <span>分析 / 评价 / 决策</span>
            </div>
            <div class="part">
                <div>
                    <div class="liStatics">
                        <div class="name">综合指数</div>
                        <div class="score">3.72</div>
                    </div>
                    <div class="imgbox"></div>
                </div>
                <div>
                    <div class="liStatics">
                        <div class="name">均衡系数</div>
                        <div class="score">0.15</div>
                    </div>
                    <div class="imgbox"></div>
                </div>
            </div>
        </div>
        <div class="m-mainBox">
            <div class="u-tabs-button">
                <div :class="['u-button',{'active':item.active}]" v-for="(item, index) in tabList" :key="index" @click="clickTab(item)">{{item.label}}</div>
            </div>
            <ThisYear v-if="tabSwitch==1"></ThisYear>
            <Linep v-if="tabSwitch==2"></Linep>
            <Radarp v-if="tabSwitch==3"></Radarp>
            <Scatterp v-if="tabSwitch==4"></Scatterp>
            <Boxplotp v-if="tabSwitch==5"></Boxplotp>
        </div>
    </div>
</template>
<script>

import {ThisYear,Linep,Radarp,Scatterp,Boxplotp} from "./parts"
import Indexp from "./parts/index.vue"
export default {
    name: 'pageIndex',
    data(){
        return{
            tabSwitch:'1',
            tabList:[
                {value:'1', label:'本年度'},
                {value:'2', label:'历史差异'},
                {value:'3', label:'学段差异'},
                {value:'4', label:'学校差异'},
                {value:'5', label:'年级差异'},
            ],
            progressList:[
                { value:80,color:'#fdb628',name:'学校创新发展' },
                { value:40,color:'#6374f7',name:'教师专业能力' },
                { value:10,color:'#00cd86',name:'学生综合素质发展' },
            ]
        }
    },
    components:{
        ThisYear,Linep,Radarp,Scatterp,Boxplotp,Indexp
    },
    created(){
        this.getInit()
    },
    mounted(){

    },
    methods:{
        getInit(){
            this.tabList[0].active = true
        },
        clickTab(item){
            this.tabList.forEach(every => {
                this.$set(every,'active',false)
            })
            item.active = true
            this.tabSwitch = item.value
        }
    },
}
</script>

